<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  columns: {
    type: Array,
    default: () => [
      '服务器编号',
      '操作系统',
      '开机时间',
      '可用CPU',
      '可用内存(GB)',
      'Worker版本',
      '操作'
    ]
  }
})
</script>

<template>
  <div class="server-table">
    <table>
      <thead>
        <tr>
          <th v-for="col in columns" :key="col">{{ col }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="server in data" :key="server.id">
          <td>{{ server.id }}</td>
          <td>{{ server.os }}</td>
          <td>{{ server.bootTime }}</td>
          <td>{{ server.cpu }}</td>
          <td>{{ server.memory }}</td>
          <td>{{ server.version }}</td>
          <td>
            <button class="detail-btn">详情</button>
            <label class="switch">
              <input type="checkbox" v-model="server.enabled">
              <span class="slider"></span>
            </label>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
.server-table {
  border: 1px solid #ebeef5;
  border-radius: 6px;
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th, td {
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
  text-align: left;
}

th {
  background-color: #f5f7fa;
  font-weight: 600;
  color: #606266;
}

.detail-btn {
  background: #409eff;
  color: white;
  padding: 6px 12px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 8px;
}

/* 统一开关样式 */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 20px;
}

input:checked + .slider {
  background-color: #67c23a;
}

.slider:before {
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  position: absolute;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

@media (max-width: 768px) {
  th, td {
    padding: 8px 12px;
  }
  
  .detail-btn {
    padding: 4px 8px;
    font-size: 12px;
  }
}
</style>
